<template>
	<view>
		<pageheader :setting="settingdata"></pageheader>
		<view class="green_circle" :style="'top:'+navH+'px'"></view>
		<go-top :scrollTop="scrollTop"></go-top>
		<view class="green_content">
			<navigator :url="'/home/station/stationpage?id='+item.other_uid" hover-class="none" class="supplierone"
				v-for="(item,index) in list" :key="index">
				<image :src="item.shop_log" mode="aspectFill" class="headimg"></image>
				<view class="oneinfo">
					<view class="namedes">
						<text class="clamp2">{{item.shop_name}}</text>
						<view class="xinyong_box">
							<image :src="item.mimage" v-if="item.mimage" mode="heightFix"></image>
							<view class="xin">信</view>
							<view class="xin_number">{{item.credit_value}}</view>
							<view class="shiming" v-if="item.realname">实</view>
							<view class="qiye" v-if="item.enterprise">企</view>
						</view>
					</view>
					<view class="onedes"><text>{{item.address}}</text> 距离{{item.distance+'km'}}</view>
				</view>

				<view class="rbox">
					<text class="iconfont icon-dilanxianxingiconyihuifu_huabanfuben btn lef"
						@click.stop="tochat(item)"></text>
					<text class="iconfont icon-dianhua1 btn rit" @click.stop="dialing(item.mobile)"></text>
					<view class="cancel" @click.stop="delcus(item)">取消</view>
				</view>
			</navigator>
		</view>

		<view class="not_more" v-if="list.length<1">
			<image src="/static/img/wpaihang.png" mode="widthFix"></image>
			<view class="text">暂无意向客户</view>
		</view>
		<view class="nomore" v-if="nomore&&list.length>0">—— · 没有更多了 · ——</view>
	</view>
</template>

<script>
	import App from '@/App.vue';
	var _this, $paginator, shake;
	export default {
		data() {
			return {
				settingdata: {
					name: '意向客户',
					bgColor: '#38bf8d',
					titleColor: '#fff',
					showNav: true,
					showTypes: 0,
					position: "yxCustomer"
				},
				list: [],
				navH: 0,
				// 回到头部按钮距离
				scrollTop: 0
			}
		},
		onLoad() {
			_this = this
			_this.navH = App.globalData.navHeight
			$paginator = new _this.$paginator(_this.$api)
			_this.getdata(true)
		},
		//监听页面滚动
		onPageScroll(res) {
			this.scrollTop = res.scrollTop
		},
		//下拉刷新
		onPullDownRefresh() {
			$paginator = new _this.$paginator(_this.$api)
			_this.getdata(true)
		},
		onReachBottom: function() {
			$paginator.nextPager(() => {
				_this.getdata()
			})
		},
		methods: {
			getdata: function(firstLoad = false) {
				$paginator.getData('intentionlist', {
					lon: uni.getStorageSync("address").long,
					lat: uni.getStorageSync("address").lat,
				}, (data) => {
					if (firstLoad) {
						_this.list = data.list ? data.list : []
					} else {
						_this.list = _this.list.concat(data.list)
					}
					_this.nomore = data.nomore
				})
			},
			//拨号并记录
			dialing(mobile) {
				_this.$plug.dialing(mobile)
			},

			delcus(e) {
				console.log(e)
				uni.showModal({
					content: '是否删除此意向客户',
					success: function(res) {
						if (res.confirm) {
							_this.$api.get("delIntention", {
								id: e.id
							}).then(data => {
								console.log(data)
								uni.showToast({
									title: '删除成功',
									icon: 'success',
									duration: 2000,
									success: function() {
										setTimeout(function() {
											$paginator = new _this.$paginator(_this
												.$api)
											_this.getdata(true)
										}, 1000);
									}
								})
							});
						}
					}
				});
			},
			tochat(e) {
				let list = {}
				list = {
					to_id: e.other_uid,
					from_id: wx.getStorageSync('client_uid'),
					name: e.shop_name
				}
				wx.setStorageSync('list', list)
				uni.navigateTo({
					url: '/chat/chatingroom?type=2' + '&member_type=1'
				})
			},

			// 防抖点击
			click_shake(fn) {
				if (!_this.shake) {
					fn && typeof fn === 'function' && fn()
					_this.shake = true
					setTimeout(function() {
						_this.shake = false
					}, 500)
				}
			},
		}
	}
</script>

<style lang="scss" scoped>
	.green_circle {
		width: 100%;
		height: 80rpx;
		border-radius: 0 0 80rpx 80rpx;
		background-color: #38be8c;
		position: absolute;
		z-index: -1;
	}

	.green_content {
		padding-bottom: 20rpx;

		.supplierone {
			margin: 20rpx 25rpx 0 25rpx;
			padding: 28rpx 12rpx 38rpx 12rpx;
			display: flex;
			flex-direction: row;
			align-items: center;
			box-shadow: -2rpx 4rpx 35rpx 0 rgba(224, 229, 226, 0.44);
			border-radius: 20rpx;
			background-color: #fff;

			.headimg {
				width: 108rpx;
				height: 108rpx;
				border-radius: 50%;
			}

			.oneinfo {
				margin-left: 10rpx;
				width: 410rpx;
				display: flex;
				flex-direction: column;

				.namedes {
					text {
						color: #333333;
						font-size: 32rpx;
						max-width: 410rpx;
					}

					image {
						height: 36rpx;
						margin-right: 12rpx;
						max-width: 120rpx;
					}

					.xinyong_box {
						display: flex;
						flex-direction: row;
						align-items: center;
						margin-top: 10rpx;

						.xin {
							width: 30rpx;
							height: 30rpx;
							background: #00C575;
							border-radius: 3px 0 0 3rpx;
							text-align: center;
							line-height: 30rpx;
							color: #fff;
							font-size: 20rpx;
						}

						.xin_number {
							background-color: #fff;
							border: 2rpx solid #00C575;
							border-radius: 0 3rpx 3rpx 0;
							color: #00C575;
							font-size: 20rpx;
							text-align: center;
							height: 30rpx;
							line-height: 30rpx;
							min-width: 44rpx;
						}
					}
				}

				.onedes {
					margin-top: 19rpx;
					color: #999999;
					font-size: 28rpx;

					text {
						margin-right: 10rpx;
					}
				}
			}

			.rbox {
				flex: 1;

				.lef {
					background: #4bacff;
				}

				.rit {
					background: #38be8c;
				}

				.btn {
					display: inline-block;
					font-size: 40rpx;
					width: 60rpx;
					height: 60rpx;
					line-height: 60rpx;
					color: #fff;
					border-radius: 50%;
					margin-left: 15rpx;
					text-align: center;
				}

				.cancel {
					text-align: center;
					margin-top: 19rpx;
					color: #999999;
					font-size: 28rpx;
				}
			}

		}
	}
</style>
